<template>
  <div>
    <div class="bottom">

      <div class="item">
        <p>
          <button @click="toHomePage">首页</button>
        </p>
      </div>

      <div class="item">
        <p>
          <button @click="toUserCollect">收藏</button>
        </p>
      </div>

      <div class="item">
        <p>
          <button @click="toUserCenter">我的</button>
        </p>
      </div>

    </div>
    <!-- 使其自适应屏幕大小-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  </div>
</template>

<script>
  export default {
    name: 'Footer',
    data () {
      return {}
    },
    methods:{
      //回到首页
      toHomePage(){
        this.$router.replace('/HomePage')
      },
      //收藏
      toUserCollect(){
        this.$router.replace('/UserCollect')
      },
      //回到个人中心
      toUserCenter(){
        this.$router.replace('/UserCenter')
      }
    }
  }

</script>

<style scoped>
  /* 定义底部栏位置，背景颜色 */
  .bottom {
    position: fixed;
    bottom: 0px;
    border-top: 1px solid #d2d2d2;
    background-color: #f2f2f2;
    width: 100%;
    height: 50px;
    left: 0px;

  }

  /* 定义每个按钮之间的距离 */
  .item {
    margin: 10px 4% 2px 15%;
    float: left;
  }

  /* 定义字体大小 */
  .item p {
    margin: 0;
    font-size: 20px;
  }

</style>
